<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Live entity edit</title>

  <link rel="stylesheet" type="text/css" title="Default Style" href="../../style/tree/compat/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" title="Default Style" href="../../style/form/default/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" title="Default Style" href="../../style/button/new/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    #ArticleList
    {
      border: 1px solid #AAA;
      width: 320px;
      height: 450px;
      overflow: auto;
      overflow-y: scroll;
      overflow-x: hidden;
      float: left;
      margin-right: 10px;
    }
    .Article
    {
      margin: 2px;
      padding: 4px 4px 4px 24px;
      border: 1px solid #E0E0E0;
      border-radius: 3px;
      background: #F8F8F8 no-repeat 4px 2px;
      font-size: 85%;
      cursor: pointer;
    }
    .Article-Title
    {
      font-weight: bold;
    }
    .Article:hover
    {
      border-color: #C0C0C0;
      background-color: #F0F0F0;
    }
    .Article.selected
    {
      border-color: #A0D8F0;
      background-color: #F0F4FF;
    }
    .Article.modified
    {
      background-image: url(live_edit_modified.png);
    }

    #EditForm
    {
      border-radius: 5px;
      background: #EEE;
      padding: 10px;
      float: left;
    }
    #EditForm INPUT,
    #EditForm TEXTAREA
    {
      width: 40ex;
      font-family: Consolas, Courier New, monospace;
    }
    #EditForm TEXTAREA
    {
      height: 5em;
      resize: none;
    }

    .Basis-ButtonPanel
    {
      text-align: right;
      padding-top: 10px;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basis Demos: Live entity edit</h1>

  <p id="demo-summary">
  </p>
  <div id="demo-description">
  </div>

  <div id="demo-container"></div>

  <script id="demo-javascript" type="text/javascript">

    //
    // Data
    //
    var Article = new basis.entity.EntityType({
      name: 'Article',
      fields: {
        id: Number,
        title: String,
        content: String
      }
    });

    // Generate data
    for (var i = 1; i < 10; i++)
      Article({
        id: i,
        title: 'Article #' + i,
        content: (i + ' ').repeat(20)
      });

    //
    // Define new node class for Article
    //
    var ArticleNode = basis.Class(basis.ui.Node, {
      template:
        '<div class="Article {selected} {modified}" event-click="select">' +
          '<div class="Article-Title">{title}</div>' +
          '<div class="Article-Content">{content}</div>' +
        '</div>',

      binding: {
        title: 'data:',
        content: 'data:',
        modified: function(node){
          return node.target && node.target.modified ? 'modified' : '';
        }
      },
      action: {
        select: function(event){
          this.select(basis.dom.event(event).ctrlKey);
        }
      },

      listen: {
        target: {
          rollbackUpdate: function(object, modifiedDelta){
            this.updateBind('modified');
          }
        }
      }
    });

    //
    // Article list
    //
    var articleList = new basis.ui.Container({
      id: 'ArticleList',
      dataSource: Article.all,  // set data source
      childClass: ArticleNode,  // set class for child nodes
      sorting: Function.getter('data.title', String.toLowerCase),  // sorting for child nodes
      selection: {              // we need for selection, define config for it
        handler: {
          datasetChanged: function(dataset, delta){ // dataset -> articleList.selection
            // this -> articleList.selection
            articleEditor.setDelegate(this.pick());
          }
        }
      }           
    });

    //
    // Article editor
    //

    function updateObject(){
      if (myForm && myForm.target)
        myForm.target.set(this.name, this.getValue(), true);
    }

    var myForm = new basis.ui.form.FormContent({
      disabled: true,             // desable by default
      autoDelegate: basis.dom.wrapper.DELEGATE.PARENT,   // delegate parent
      childNodes: [               // define fields
        {
          type: 'text',           // type of field
          name: 'title',          // name should be equal to field name in target object info
          title: 'Title',         // caption
          handler: {              // default handler for field, update data on value change and key up
            change: updateObject,
            keyup: updateObject
          }
        },
        {
          type: 'textarea',
          name: 'content',
          title: 'Content',
          handler: {
            change: updateObject,
            keyup: updateObject
          }
        }
      ],
      handler: {                 // add handler for form
        targetChanged: function(object, oldTarget){
          // this -> myForm
          if (this.target)
          {
            this.loadData(this.data); // if have got a target, load data to form
            this.enable();            // and enable editing
          }
          else
          {
            this.reset();             // if no target - clear form
            this.disable();           // and disable editing
          }
        }
      }
    });

    var formPanel = new basis.ui.button.ButtonPanel({
      autoDelegate: basis.dom.wrapper.DELEGATE.PARENT,
      disabled: true,
      childNodes: [
        {
          caption: 'Save',
          click: function(){
            myForm.getRootDelegate().commit();
          }
        },
        {
          caption: 'Cancel',
          click: function(){
            myForm.getRootDelegate().rollback();
            myForm.loadData(myForm.data);
          }
        }
      ],
      handler: {
        targetChanged: function(){
          if (this.target && this.target.modified)
            this.enable();
          else
            this.disable();
        }
      },
      listen: {
        target: {
          rollbackUpdate: function(object, delta){
            if (object.modified)
              this.enable();
            else
              this.disable();
          }
        }
      }
    });

    var articleEditor = new basis.ui.Container({
      id: 'EditForm',
      childNodes: [              // set child nodes
        myForm,
        formPanel
      ]
    });

    // insert into document
    basis.dom.insert('demo-container', [
      articleList.element,
      articleEditor.element
    ]);

  </script>  
</body>

</html>
